<!doctype html>
{php}
$static = '/static/home/';
{/php}
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>{$siteConfig['seo_title']}</title>
    <meta name="apple-mobile-web-app-title" content="{$siteConfig['seo_title']}">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="{$static}images/favicon.ico">
    <link href="{$static}css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="{$static}css/icons.min.css" rel="stylesheet" type="text/css" />
    <link href="{$static}css/app.min.css" rel="stylesheet" type="text/css" />
    <link href="{$static}css/style.css" rel="stylesheet" type="text/css" />
    <link href="{$static}libs/cxCalendar/css/jquery.cxcalendar.css" rel="stylesheet" type="text/css" />
    <link href="{$static}libs/bootstrap-switch/css/bootstrap-switch.css" rel="stylesheet" type="text/css" />
</head>
<body data-sidebar="dark">
<div id="layout-wrapper">
    {include file='public/mine_topbar' /}
    {include file='public/mine_left' /}
    <div class="main-content">
        <div class="page-content">
            <div class="container-fluid">

                <!-- start page title -->
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box d-flex align-items-center justify-content-between">
                            <h4 class="mb-0 font-size-18">设置短链</h4>

                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="javascript: void(0);">鹰眼短链</a></li>
                                    <li class="breadcrumb-item">短链管理</li>
                                    <li class="breadcrumb-item active">设置短链</li>
                                </ol>
                            </div>

                        </div>
                    </div>
                </div>
                <!-- end page title -->

                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="col-lg-6">
                                    <form class="js-ajax-from">
                                        <div class="form-group">
                                            <label>短链接</label>
                                            <input type="text" class="form-control" value="{$info.short_url}/{$info.keyword}" disabled />
                                        </div>
                                        <div class="form-group">
                                            <label>原始链接</label>
                                            <input type="text" class="form-control" value="{$info.link}" name="link"
                                                   placeholder="请输入你的原始链接，例如：https://a.com/?agentCode=100&channelCode=android" />
                                            <em for="link" class="invalid"></em>
                                        </div>
                                        <div class="from-group">
                                            <label>渠道参数</label>
                                            <p>
                                                <input id="params-switch" type="checkbox" {if condition="$info['params_switch'] eq 1"}checked{/if}>
                                                <input type="hidden" name="paramsSwitch" value="{$info.params_switch}">
                                            </p>
                                        </div>
                                        <div class="form-group">
                                            <label>链接类型</label>
                                            <select class="form-control custom-select" name="linkType" id="linkType">
                                                <option value="0" {if condition="$info['link_type'] eq '0'"}selected{/if}>普通链接</option>
                                                <option value="1" {if condition="$info['link_type'] eq '1'"}selected{/if}>时间链接</option>
                                                <option value="2" {if condition="$info['link_type'] eq '2'"}selected{/if}>私有链接</option>
                                            </select>
                                        </div>
                                        <div class="form-group" id="linkDom">
                                            {switch $info.link_type }
                                                {case 1}
                                                    <label>有效时间</label>
                                                    <input type="text" class="form-control" name="expireTime" value="{$info.expire_time}" id="expireTime" placeholder="请选择有效时间" />
                                                    <em for="expireTime" class="invalid"></em>
                                                {/case}
                                                {case 2}
                                                    <label>访问密码</label>
                                                    <input type="text" class="form-control" name="password" value="{$info.password}" placeholder="请输入访问密码" />
                                                    <em for="password" class="invalid"></em>
                                                {/case}
                                            {/switch}
                                        </div>
                                        <div class="form-group">
                                            <label>备注</label>
                                            <textarea type="text" class="form-control" rows="5" name="remark" placeholder="请输入备注">{$info.remark}</textarea>
                                            <em for="remark" class="invalid"></em>
                                        </div>
                                        <div class="form-group">
                                            <input type="hidden" name="id" value="{$info.url_id}" />
                                            <input type="hidden" name="action" value="edit" />
                                            <button type="submit" class="btn btn-primary btn-block waves-effect">确认修改</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end row -->

            </div> <!-- container-fluid -->
        </div>
        <!-- End Page-content -->

    </div>
    <!-- end main content-->

</div>
<!-- END layout-wrapper -->

<!-- JAVASCRIPT -->
<script src="{$static}libs/jquery/jquery.min.js"></script>
<script src="{$static}libs/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="{$static}libs/metismenu/metisMenu.min.js"></script>
<script src="{$static}libs/simplebar/simplebar.min.js"></script>
<script src="{$static}libs/node-waves/waves.min.js"></script>
<script src="{$static}libs/layer/layer.js"></script>

<script src="{$static}libs/cxCalendar/js/jquery.cxcalendar.js"></script>
<script src="{$static}libs/bootstrap-switch/js/bootstrap-switch.js"></script>

<script src="{$static}js/pages/jquery.validate.min.js"></script>
<script src="{$static}js/app.js"></script>
<script type="text/javascript">
    $('#linkType').change(function () {
        var linkType = $(this).select().val();
        var linkDom = $("#linkDom");
        var expireTime = '{$info.expire_time}';
        var password = '{$info.password}';
        switch (linkType) {
            case '1': {
                linkDom.html('<label>有效时间</label>\n' +
                    '<input type="text" class="form-control" name="expireTime" value="'+expireTime+'"  id="expireTime" placeholder="请选择有效时间" />\n' +
                    '<em for="expireTime" class="invalid"></em>');

                $('#expireTime').cxCalendar({type:'datetime',format: 'YYYY-MM-DD HH:mm:ss'});
                break;
            }
            case '2': {
                linkDom.html('<label>访问密码</label>\n' +
                    '<input type="text" class="form-control" name="password" value="'+password+'" id="password" placeholder="请输入访问密码" />\n' +
                    '<em for="password" class="invalid"></em>');
                break;
            }
            default: {
                linkDom.html('');
            }
        }
    });

    $(document).ready(function() {
        $('#params-switch').bootstrapSwitch({
            onText : "显示",
            offText : "隐藏",
            onColor : "success",
            offColor : "danger",
            size : "normal",
            onSwitchChange : function(event, state) {
                var paramsSwitch = $('input[name=paramsSwitch]');
                if(state === true) {
                    paramsSwitch.val('1');
                }else {
                    paramsSwitch.val('0');
                }
            }
        });

        $(".js-ajax-from").validate({
            rules: {
                link: {
                    required: true,
                }
            },
            messages: {
                link: {
                    required: "请输入https或者http协议url地址",
                }
            },
            submitHandler: function() {
                $.ajax({
                    url: "{:url('Url/operateAjax')}",
                    type: "POST",
                    data: $(".js-ajax-from").serialize(),
                    dataType: 'json',
                    async: true,
                    success: function (res) {
                        if (res.errorCode === 200) {
                            window.history.go(-1);
                        } else {
                            layer.alert(res.message, {
                                title: '提示',
                                icon: 2
                            });
                        }
                    }
                });
            }
        });
    });
</script>
</body>
</html>